<template>
  <div class="login" :style="{ 'background-image': 'url(' + backImg + ')' }">
    <div class="login-first" v-show="!loginShow" @click="navtLogin">
      <div class="login-time">
        <div class="time">{{ time }}</div>
        <div class="date">
          <span>{{ date }}</span>,
          <span>{{ week }}</span>
        </div>
      </div>

      <div class="login-search-left">
        <i class="fa fa-search" aria-hidden="true"></i>
        <div>汇聚星辰，每个项目都是耀眼的存在！</div>
      </div>

      <div class="login-search-center">
        <i class="fa fa-search" aria-hidden="true"></i>
        <div>乐趣由此开始，开始探索吧！</div>
      </div>

      <div class="login-favorite-right">
        <i class="fa fa-heart-o" aria-hidden="true"></i>
        <div>喜欢，就收藏起来吧！</div>
      </div>

      <div class="login-footer">
        <i class="fa fa-wifi" aria-hidden="true"></i>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <i class="fa fa-battery-3" aria-hidden="true"></i>
      </div>
    </div>
    <transition name="fade">
      <div class="login-second" v-show="loginShow">
        <div class="login-box">
          <h2>登 &nbsp;&nbsp;&nbsp; 录</h2>
          <form @submit.prevent="login">
            <div class="input-group">
              <label for="username">用户名:</label>
              <input type="text" id="username" v-model="username" required>
            </div>
            <div class="input-group">
              <label for="password">密码:</label>
              <input type="password" id="password" v-model="password" required>
            </div>
            <button type="submit">登&nbsp;&nbsp;录</button>
          </form>
          <p v-if="loginError" class="error-message">{{ loginErrorMessage }}</p>
        </div>
      </div>
    </transition>

  </div>
</template>
  
<script>

import moment from "moment"

export default {
  name: "Login",
  components: {
  },
  data() {
    return {
      time: moment().format('HH:mm'),
      date: moment().format('MM月DD日'),
      week: '',
      loginShow: false,
      backImg: require('../../assets/img/login1.png'),
      username: '',
      password: '',
      loginError: false,
      loginErrorMessage: ''
    }
  },
  created() {
    this.getTimes()
    this.week = this.getWeek();
  },
  methods: {
    getTimes() {
      let that = this;
      setInterval(() => {
        this.time = moment().format('HH:mm');
      }, 60 * 1000);
    },
    getWeek() {
      let week = moment().day()
      switch (week) {
        case 1:
          return '星期一'
        case 2:
          return '星期二'
        case 3:
          return '星期三'
        case 4:
          return '星期四'
        case 5:
          return '星期五'
        case 6:
          return '星期六'
        case 0:
          return '星期日'
      }
    },
    navtLogin() {
      this.loginShow = true;
      this.backImg = require('../../assets/img/login2.png')
    },
    login() {
      // 在这里执行登录逻辑
      // 假设登录失败，并设置错误提示信息
      this.loginError = true;
      this.loginErrorMessage = '登录失败，请检查用户名和密码。';
    }

  },
  beforeDestroy() {
    if (this.times) {
      clearInterval(this.getTimesInterval);
    }
  },


}
</script>
  
<style scoped>
.login {
  /* background: url("../../assets/img/login1.png"); */

  /* background-color: aqua; */
  position: fixed;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  z-index: 300;
}

.login-time {
  width: 190px;
  margin: 180px auto;
}

.login-time .time {
  font-size: 80px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
}

.login-time .date {
  font-size: 18px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  text-align: center;
}

.login-search-left {
  position: absolute;
  top: 20px;
  width: 200px;
  padding: 35px 80px 15px 35px;
  text-align: center;
  font-size: 15px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
}

.login-search-left i {
  margin-bottom: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;

  border: 1px solid #dccfcf;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.7);
}

.login-search-center {
  position: absolute;
  top: 60%;
  left: 45%;
  width: 200px;
  text-align: center;
  font-size: 15px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  border: 1px solid #dccfcf;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
}

.login-favorite-right {
  position: absolute;
  top: 13%;
  right: 5%;
  width: 200px;
  text-align: center;
  font-size: 15px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  border: 1px solid #dccfcf;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
}

.login-footer {
  position: absolute;
  bottom: 3%;
  right: 5%;
  text-align: center;
}

.login-second {
  border: 1px solid #dccfcf;
  width: 350px;
  margin: 180px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color: rgba(255, 255, 255, 0.7);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.login-box {
  width: 300px;
  padding: 20px;
}

.login-box h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 35px;
}

.input-group {
  margin-bottom: 10px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 5px;
}

button {
  width: 106%;
  padding: 8px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.error-message {
  color: red;
  margin-top: 10px;
  text-align: center;
}
</style>